<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="${base}" />
<title>室内环境监控系统</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="novafitness co.">
<link type="text/css" rel="stylesheet" href="${base}/plugins/formValidator4.0.1/style/validatorTidyMode.css" />
<link rel="stylesheet" type="text/css" href="${base}/plugins/home.css" media="all" />
<link rel="stylesheet" type="text/css" href="${base}/plugins/table.css" media="all" />
<!-- Bootstrap -->
<link id="bootstrapCss" rel="stylesheet" href="${base}/plugins/zui/css/zui.css" />
<link id="bootstrapCss" rel="stylesheet" href="${base}/plugins/zui/lib/datetimepicker/datetimepicker.css" />
<style type="text/css">
.loadconfigurea {
	float: right;
	text-decoration: none;
}
#machineinfodiv { transition: all 250ms;}
#configureformdiv { transition: all 250ms;}
</style>
<script type="text/javascript">
	var base = '${base}';
</script>
<script id="table-template" type="text/x-handlebars-template">
 {{#each this}}
	<li class="list-group-item">
			<div class="checkbox">
			<label> <input type="checkbox" name="deviceConfigure.id" value="{{id}}"> {{devicename}}
			</label>
<a title="加载当前配置" class="loadconfigurea" href="javascript:loadconfigure('{{id}}')"  > <i class="icon-forward"></i> </a>
			</div>
	</li>
{{/each}}
</script>
<style>
body {
	font-family: 'microsoft yahei';
	font-size: 16px;
	min-width: 1024px;
}

.logo {
	height: 100px;
}

.menu li {
	width: 150px;
	text-align: center;
	padding: 0;
	'
}

.help-block {
	color: #f00;
	display: none;
}

.rooms {
	background-color: #F4F4F4;
}
</style>
<style type="text/css" adt="123"></style>
<style type="text/css">
object, embed {
	-webkit-animation-duration: .001s;
	-webkit-animation-name: playerInserted;
	-ms-animation-duration: .001s;
	-ms-animation-name: playerInserted;
	-o-animation-duration: .001s;
	-o-animation-name: playerInserted;
	animation-duration: .001s;
	animation-name: playerInserted;
}

@
-webkit-keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
@
-ms-keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
@
-o-keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
@
keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
a {
	text-decoration: none;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

.labeldiv {
	text-align: right;
}
#machineinfo{height:600px;overflow: scroll;}
</style>
</head>
<body youdao="bind" ryt12934="1">
	<div class="container" style="width: 1024px;">
		<% layout("/common/header.html"){} %>
		<div class="row">
			<div class="col-xs-3" id="machineinfodiv">
					<h3>选择控制机器：</h3>
				<form action="" id="machineinfo" >
					<ul class="list-group" id="machineinfo">
						<li class="list-group-item">
							<div class="checkbox">
								<label> 
									<input type="checkbox" value="">
								</label>
							</div>
						</li>
					</ul>
				</form>
			</div>

			<div class="col-xs-9" id="configureformdiv">
				<form id="configureform">
					<h3>配置信息：</h3>

					<div class="row" id="setupinfo">
						<div class="col-xs-2 labeldiv">
							<label for="reportinginterval">上报间隔:</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<input title="" maxlength="2" type="text" class="form-control num" id="reportinginterval"
								name="deviceConfigure.reportinginterval">
						</div>
						<div class="col-xs-2 labeldiv">
							<label for="frequency">设置频率:</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<input title="单位: Hz（只对手动有效）(10-60HZ)" maxlength="2" type="text" class="form-control num" id="frequency"
								name="deviceConfigure.frequency">
						</div>

						<div class="col-xs-2 labeldiv">
							<label for="model">设置模式:</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<select class="form-control num" id="model" name="deviceConfigure.model">
								<option value="">--请选择--</option>
								<option value="1">--自动--</option>
								<option value="2">--手动--</option>
								<option value="3">--睡眠--</option>
							</select>
							<!-- <input title="1 自动：2 手动：3睡眠" maxlength="3" type="text" class="form-control num" id="model"
								name="deviceConfigure.model"> -->
						</div>
						
						<!-- <div class="col-xs-2 labeldiv">
							<label for="time">设置时间:</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<input title="设置设备时间" type="datetime" class="form-control form-datetime" id="time" name="deviceConfigure.time">
						</div> -->
						<div class="col-xs-2 labeldiv">
							<label for="setonoroff">设置开/关机:</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<select class="form-control num" id="setonoroff" name="deviceConfigure.setonoroff">
								<option value="">--请选择--</option>
								<option value="0">--开机--</option>
								<option value="1">--关机--</option>
								<option value="2">--链接内网--</option>
								<option value="3">--链接外网--</option>
							</select>
							<!-- <input title="0:开机 1：关机 2：链接内网 3：链接外网" maxlength="2" type="text" class="form-control num" id="setonoroff"
								name="deviceConfigure.setonoroff"> -->
						</div>


						<div class="col-xs-2 labeldiv">
							<label for="on_hour">设置开机:时：</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<input title="小时（0-23）" maxlength="2" type="text" class="form-control num" id="on_hour"
								name="deviceConfigure.on_hour">
						</div>
						<div class="col-xs-2 labeldiv">
							<label for="on_min">分：</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<input title="分钟（0-59）" maxlength="2" type="text" class="form-control num" id="on_min"
								name="deviceConfigure.on_min">
						</div>

						<div class="col-xs-2 labeldiv">
							<label for="off_hour">设置关机:时：</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<input title="小时（0-23）" maxlength="2" type="text" class="form-control num" id="off_hour"
								name="deviceConfigure.off_hour">
						</div>
						<div class="col-xs-2 labeldiv">
							<label for="off_min">分：</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<input title="分钟（0-59）" maxlength="2" type="text" class="form-control num" id="off_min"
								name="deviceConfigure.off_min">
						</div>
						
						<div class="col-xs-2 labeldiv">
							<label for="functionalswitch">设置功能开关:</label>
						</div>
						<div class="col-xs-4 inputdiv">
						
							<select class="form-control num" id="functionalswitch" name="deviceConfigure.functionalswitch">
								<option value="">--请选择--</option>
								<option value="1">--开--</option>
								<option value="2">--关--</option>
							</select>
							
							<!-- <input title="开：1 关：2（1-2）" maxlength="2" type="text" class="form-control num" id="functionalswitch"
								name="deviceConfigure.functionalswitch"> -->
						</div>
						

						<div class="col-xs-2 labeldiv">
							<label for="openthedustpm25out">静电除尘开启PM2.5：</label>
						</div>
						<div class="col-xs-4 inputdiv">
							<input title="设置自动模式静电除尘开启的户外PM2.5  （50-255）" maxlength="3" type="text" class="form-control num"
								id="openthedustpm25out" name="deviceConfigure.openthedustpm25out">
						</div>

					</div>
					<br />
					<div class="col-xs-12" style="text-align: center;">
						<input type="button" id="submitconfig" style="width: 100%" value="提交" class="btn btn-primary" />
					</div>

				</form>
			</div>

		</div>
	</div>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script id="jquery" src="${base}/plugins/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script id="bootstrapJs" type="text/javascript" src="${base}/plugins/zui/js/zui.js"></script>
	<script id="bootstrapJs" type="text/javascript" src="${base}/plugins/zui/lib/datetimepicker/datetimepicker.js"></script>
	<script type="text/javascript" src="${base}/plugins/handlebars.js"></script>
	<script type="text/javascript" src="${base}/plugins/loadScripts.js"></script>

	<script src="${base}/plugins/formValidator4.0.1/formValidator-4.0.1.js" type="text/javascript"></script>
	<script src="${base}/plugins/formValidator4.0.1/formValidatorRegex.js" type="text/javascript"></script>
</body>

<script type="text/javascript">
var validateform;
	$(function(e) {
		getDeviceData();

		$("#setupinfo input.num").keyup(
				function(e) {
					if (isNaN($(this).val())) {
						$(this).val(
								$(this).val().substring(0,
										$(this).val().length - 1));
					}
				})

		$('.form-datetime').datetimepicker({
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			showMeridian : 1,
			format : 'yyyy-mm-dd hh:ii'
		});

		$('.form-time').datetimepicker({
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 1,
			minView : 0,
			maxView : 1,
			forceParse : 0,
			format : 'hh:ii'
		});

		$("#submitconfig").click(function(e) {
			var names = $("#machineinfo input[type='checkbox']:checked");
			if(names.length == 0){
				$("#machineinfodiv").css('transform','rotate(10deg)');
				setTimeout(function(){$("#machineinfodiv").css('transform','rotate(-10deg)')}, 250)
				setTimeout(function(){$("#machineinfodiv").css('transform','rotate(0deg)')}, 500)
				//alert("请选择更新的设备！");
				var msg = new $.Messager('请选择需要更新的设备！',{type:'warning',placement:'bottom'});
		        msg.show();
				return;
			}
			var flag = $.formValidator.pageIsValid();
			if(flag){
				$.ajax({
					url : "${base}/submitConfigInfo",
					dataType : 'json',
					data : $("#machineinfo,#configureform").serialize(),
					type : 'post',
					success : function(data) {
						var msg = new $.Messager(data.msg,{type:'success',placement:'bottom'});
				       	msg.show();
						//alert(data.msg);
					}
				});
			}
		});
		
		$.formValidator.initConfig({formID:"configureform",autoTip:true,tidyMode:true,onError:function(a,b,c){ 
			var msg = new $.Messager(a,{type:'warning',placement:'bottom'});
	        msg.show();
	        $(b).focus();
	        
	        $("#configureformdiv").css('transform','rotate(5deg)');
			setTimeout(function(){$("#configureformdiv").css('transform','rotate(-5deg)')}, 250)
			setTimeout(function(){$("#configureformdiv").css('transform','rotate(0deg)')}, 500)
	        
		}});
		
		$("#reportinginterval").formValidator({onShow:"单位：秒  (0-30s)",onFocus:"设置上报间隔 单位：秒  (0-30s)",onCorrect:"输入正确"}).inputValidator({min:0,max:30,type:"value",onError:"上报间隔0-30之间,请确认"});
		$("#frequency").formValidator({onShow:"设置频率 单位: Hz（只对手动有效）(0-60HZ)",onFocus:"设置频率 单位: Hz（只对手动有效）(0-60HZ)",onCorrect:"输入正确"}).inputValidator({min:0,max:60,type:"value",onError:"设置频率 单位: Hz（只对手动有效）(0-60HZ),请确认"});
		$("#model").formValidator({onShow:"设置模式1 自动：2 手动：3睡眠： (1-3以后可能会扩展) 加10 代表上锁 不加代表解锁",onFocus:"设置模式1 自动：2 手动：3睡眠： (1-3以后可能会扩展) 加10 代表上锁 不加代表解锁",onCorrect:"输入正确"}).
		functionValidator({fun : function(v){return (v==1 || v==2 || v==3|| v==11|| v==12|| v==13);},validateType:"FunctionValidator",  onError : "设置模式1 自动：2 手动：3睡眠： (1-3以后可能会扩展) 加10 代表上锁 不加代表解锁"});
		
		$("#functionalswitch").formValidator({onShow:"设置功能开关 1：开 2：关   加10代表定时功能开 不加代表功能关",onFocus:"设置功能开关 1：开 2：关   加10代表定时功能开 不加代表功能关",onCorrect:"输入正确"})
		.functionValidator({fun : function(v){return (v==1 || v==2 || v==11|| v==12 );},validateType:"FunctionValidator",  onError : "设置功能开关 1：开 2：关   加10代表定时功能开 不加代表功能关"});
		//$("#time").formValidator({onShow:"设置时间",onFocus:"设置时间",onCorrect:"输入正确"}).inputValidator({min:1,onError:"设置时间不能为空,请确认"});
		$("#setonoroff").formValidator({onShow:"设置开/关机0:开机1：关机2：链接内网3：链接外网",onFocus:"设置开/关机0:开机1：关机2：链接内网3：链接外网",onCorrect:"输入正确"}).inputValidator({min:0,max:3,type:"value",onError:"设置开/关机0:开机1：关机2：链接内网3：链接外网,请确认"});
		$("#on_hour").formValidator({onShow:"设置开机小时（0-23）",onFocus:"设置开机小时（0-23）",onCorrect:"输入正确"}).inputValidator({min:0,max:23,type:"value",onError:"设置开机小时（0-23）,请确认"});
		$("#on_min").formValidator({onShow:"设置开机 分钟（0-59）",onFocus:"设置开机 分钟（0-59）",onCorrect:"输入正确"}).inputValidator({min:0,max:59,type:"value",onError:"设置开机 分钟（0-59）,请确认"});
		$("#off_hour").formValidator({onShow:"设置关机小时（0-23）",onFocus:"设置关机小时（0-23）",onCorrect:"输入正确"}).inputValidator({min:0,max:23,type:"value",onError:"设置关机小时（0-23）,请确认"});
		$("#off_min").formValidator({onShow:"设置关机 分钟（0-59）",onFocus:"设置关机 分钟（0-59）",onCorrect:"输入正确"}).inputValidator({min:0,max:59,type:"value",onError:"设置关机 分钟（0-59）,请确认"});
		$("#openthedustpm25out").formValidator({onShow:"设置自动模式静电除尘开启的户外PM2.5  （50-255）",onFocus:"设置自动模式静电除尘开启的户外PM2.5  （50-255）",onCorrect:"输入正确"}).inputValidator({min:50,max:255,type:"value",onError:"设置自动模式静电除尘开启的户外PM2.5  （50-255）,请确认"});
		
	})

	function getDeviceData() {
		$("#machineinfo").html("");
		$.ajax({
			url : "${base}/getData",
			dataType : 'json',
			type : 'post',
			success : function(data) {
				var myTemplate = Handlebars
						.compile($("#table-template").html());

				$('#machineinfo').html(myTemplate(data));
			}
		});

	}
	function loadconfigure(id) {
		$.ajax({
			url : "${base}/getConfigInfo",
			dataType : 'json',
			type : 'post',
			data : 'id=' + id,
			success : function(data) {
				
				$("#configureform")[0].reset();
				if (data.flag) {
					var msg = new $.Messager(data.msg,{type:'success',placement:'bottom'});
			       	msg.show();
					//alert(data.msg);
				} else {
					for ( var x in data) {
						$("#" + x).val(data[x]);
					}
					var msg = new $.Messager("数据加载成功！",{type:'success',placement:'bottom'});
			       	msg.show();
					 $("#configureformdiv").css('transform','rotate(5deg)');
					setTimeout(function(){$("#configureformdiv").css('transform','rotate(-5deg)')}, 250)
					setTimeout(function(){$("#configureformdiv").css('transform','rotate(0deg)')}, 500)
				}
			}
		});
	}
</script>
</html>